<script>
import { computed, provide } from 'vue'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    // 提供给子组件的数据
    const activeName = computed(() => props.modelValue)
    provide('activeName', activeName)
    // 切换选项卡
    const changeTabs = (name, index) => {
      // console.log('函数被调用了', name, index)
      // v-model 双向绑定更新
      emit('update:modelValue', name)
      // 触发自定义事件并传递 name 和 index
      emit('tab-click', { name, index })
    }
    return { changeTabs }
  },
  // render 可以动态创建模板内容
  render () {
    // 获取默认插槽
    const panels = this.$slots.default()
    console.log('默认插槽', panels)
    let arr = []
    panels.forEach(item => {
      if (item.type.name === 'XtxTabsPanel') {
        arr = panels
      } else {
        arr = panels[0].children
      }
    })
    // return 的内容就是渲染的内容(等价于以前的 template 的内容)
    // JSX语法：
    //    1. 插值表达式都用一对花括号 { }
    //    2. 列表循环通过 map()
    //    3. 绑定事件用 onClick
    return <div class="xtx-tabs">
      <nav>
        {
          arr.map((item, index) => <a
            href="javascript:;"
            class={{ active: this.modelValue === item.props.name }}
            onClick={ () => this.changeTabs(item.props.name, index) }
          >
            { item.props.label }
          </a>)
        }
      </nav>
      { panels }
    </div>
  }
}
</script>

<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
